<template>
 <div class="drawer">
   <div class="left-content">
    <el-image 
    class="avatar"
    :src="this.user.avatarUrl"
    @click="drawer = true"
    >
    </el-image>
    <span class="back" @click="getLoginOut">退出登录</span>
    <img class="right" src="@/assets/icon/right.png" alt="">
    
   </div>
  
  <el-drawer
    v-model="drawer"
    title="个人信息"
    :direction="direction"
    style="padding:0px"
  >
    <user></user>
  </el-drawer>
 </div>
</template>

<script>

import api from '@/api/user_index.js'
import user from '@/components/user/user.vue'
import {mapState,mapMutations} from 'vuex'
 export default {
  name: '' ,
 data () {
 return {
   drawer: false,
   direction: 'rtl',
   user:{
     avatarUrl:'',
     count: 0,
     createdTime: '',
     email:'',
     phone:'',
     sex: 0,
     nickname:'',
     realName:'',
     signature:'',
     id:''
   },
   score:{
    //  可用积分
     avaliableIntegralValue: null,
    // 总获取积分
    gainIntegralValue: null,
    // 已使用积分
    usedIntegralValue: null
   }
  }
 },
 components:{
   user
 },
 mounted(){
   this.getUser()
  //  页面加载完成之后强制刷新一次 刷新渲染
   if (location.href.indexOf("#reloaded")<=0) {
      location.href = location.href + "#reloaded"+"#reloaded";
      location.reload();
    }
 },
 methods:{
  ...mapMutations('moduleUser',['updateUser']),
  ...mapMutations('moduleScore',['updateScore']),
    getUser(){
     api.getUser().then((res) => {
       console.log(res)
       const user= res.data.obj
       const score = res.data.obj.score
      //  console.log(score)
      //  提取出相同的值并赋值
      let temp1 = Object.entries(this.user).reduce((a,[key,val]) => {
        if(key in user) a[key] = user[key];
        return a
      },{})
      this.user = temp1
      this.updateUser(this.user)
      console.log(this.$store.state.moduleUser.user)

      let temp2 = Object.entries(this.score).reduce((b,[key,val]) => {
        if(key in score) b[key] = score[key]
        return b
      },{})
      this.score = temp2
      this.updateScore(this.score)
      console.log(this.$store.state.moduleScore.score)
      console.log(this.score)

     }).catch(err => {
       console.log(err)
     })
   },
   getLoginOut(){
    api.getLoginOut().then((res) => {
      console.log(res)
      if(res.data.code == 200){
        localStorage.removeItem('token')
        let timer = setTimeout(() => {
          this.$router.push('/')
        }, 1500);
         
        this.$router.go(0)
      }
    }).catch(err => {
       console.log(err)
     })
   },
 },
}

</script>
<style scope lang="less">
.drawer{
  .left-content{
    position: relative;
    bottom: 60px;
    float: right;
    display: flex;
    align-items: center;
    .avatar{
      height: 50px;
      width: 50px;
      border-radius:25px ;
      margin-right: 10px;
    }
    .back{
      color: #28627C;
      font-size: 14px;
      cursor: pointer;
      &:hover{
        color: #67C23A;
      }
    }
  }
 .el-drawer__body{
    padding: 0px;
    background-color: #EFFFF7;
 }
  .right{
    height: 16px;
    width: 16px;
  }
}

</style>